import React, { PureComponent } from "react";
import { connect } from "react-redux";
import { Flex ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import { callApi } from "app/utils";
import {hashHistory} from 'React-Router'
import invite1 from 'assets/images/threeapp/invite1.png'
import invite2 from 'assets/images/threeapp/invite2.png'
import invite3 from 'assets/images/threeapp/invite3.png'
import invite4 from 'assets/images/threeapp/invite4.png'
import mao from 'assets/images/mao.png'




export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info:{},
      infoList:[]
    };
  }

  componentDidMount() {
      this.requestList({token:JSON.parse(localStorage.getItem('userData')).token})
  }

  requestList(item,cur){
    callApi('/account/invite/record',item,"POST").then((data)=>{
      if(data.success==true){
       this.setState({info:data.data,infoList:data.data.transactionList})
      }
    })
  }
  

    //销毁时解绑事件
    componentWillUnmount() {
      //重写组件的setState方法，直接返回空
      this.setState = (state,callback)=>{
        return;
      };  
    }

  render() {
    return (
      <div className={`${s.my_inviteBox}`}>
        <AxHeader/>
        <Flex className={`${s.top}`}>我的邀请码：<span>{this.state.info.myCode}</span></Flex>
        <Flex className={`mgtop10`}>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite1} className={`mgr5`} />总奖励金额</Flex.Item>
                    <Flex.Item className={`mgt10`}>{this.state.info.totalAmount}元</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite2} className={`mgr5`} />已奖励金额</Flex.Item>
                    <Flex.Item className={`mgt10`}>{this.state.info.inviterUserNum}元</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite3} className={`mgr5`} />待奖励金额</Flex.Item>
                    <Flex.Item className={`mgt10`}>{this.state.info.waitAmount}元</Flex.Item>
                </Flex>
            </Flex.Item>
        </Flex>
        <Flex>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite4} className={`mgr5`} />注册日期</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite1} className={`mgr5`} />好友名称</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite2} className={`mgr5`} />当前状态</Flex.Item>
                </Flex>
            </Flex.Item>
        </Flex>
        {this.state.infoList.length>0?
            this.state.infoList.length.map((item,index)=>{
                return <Flex>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite4} className={`mgr5`} />注册日期</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite1} className={`mgr5`} />好友名称</Flex.Item>
                </Flex>
            </Flex.Item>
            <Flex.Item>
                <Flex direction="column">
                    <Flex.Item className={`mgt10`}><img src={invite2} className={`mgr5`} />当前状态</Flex.Item>
                </Flex>
            </Flex.Item>
        </Flex>
            }):<Flex direction="column">
            <Flex.Item>
                <img src={mao}/>
            </Flex.Item>
            <Flex.Item>
            暂时没有邀请记录！
            </Flex.Item></Flex>}
        <div className={`${s.inviteBtn}`} onClick={()=>{
            hashHistory.push('/invite')
        }}>现在邀请</div>
      </div>
    );
  }
}
